/*
 * 地址选择
 */
'use strict';
import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    Image,
    ListView,
    RefreshControl,
    TouchableOpacity,
    Dimensions,
    Platform,
    Animated,
    TouchableHighlight,
    AsyncStorage,
    Alert,
    ScrollView
} from 'react-native';


import Toast from 'antd-mobile/lib/toast';
import List from 'antd-mobile/lib/list';
import ActivityIndicator from 'antd-mobile/lib/activity-indicator';

import NavTitle from '../component/NavTitle';

import Classify from './Classify';

const Item = List.Item;

import XFetch from '../XFetch';

import { connect } from 'react-redux';
import {changeAddress} from '../action/address';

class Shops extends Component {
    constructor(props) {
        super(props)

        this.state = {
            cityStatus: false,
            cityText: '',
            cityId: '',
            citys: [],
            animating:false,
            cityIds:[]
        }
    }

    componentDidMount(){
        this._changeAddress();
    }

    _changeAddress(ID=0,item = void 0){
        if(item && item.LAST){
            this.props.navigator.push({
                name:'Classify',
                component:Classify,
                params:{
                    id:item.ID
                }
            })
            return;
        }
        this.setState({
            animating:true,
            cityIds:[...this.state.cityIds,ID]
        })
        XFetch(`http://www.weiweigo.com/app/address.aspx?method=show&pid=${ID}`,{
            method:'GET'
        }).then(data=>{
            this.setState({
                citys:data,
                animating:false,
            })
        });
    }

    _renderList(){
        return this.state.citys.map((obj,i)=>{
            return (
                <Item
                    key={`list${i}${obj.ID}`}
                    arrow="horizontal"
                    style={{backgroundColor:i%2===0?'#F3E9C5':'#FFF'}}
                    onClick={this._changeAddress.bind(this,obj.ID,obj)}
                >
                    <View style={styles.itemStyle}>
                        <Text style={styles.keys}>{obj.LETTER}</Text>
                        <Text>{obj.NAME}</Text>
                    </View>
                </Item>
            )
        })
    }

    backTopLevel(){
        this.state.cityIds.pop();
        let id = this.state.cityIds.pop();

        this.setState({
            cityIds:[...this.state.cityIds]
        })
        this._changeAddress(id);
    }

    render() {
        return (
            <View style={styles.container}>
                <NavTitle
                    title='同城商家'
                    headColor = '#fbdc3a'
                    leftButton = {this.state.cityIds.length !== 1?true:false}
                    leftText = {this.state.cityIds.length !== 1?"返回":''}
                    leftHander = {()=>{
                        this.backTopLevel();
                    }}
                />
                <View style={{padding:10,marginTop:5,backgroundColor:'#5f9bf8'}}>
                    <Text style={{fontSize:16,color:'#FFF',fontWeight:'600'}}>
                        免费注册=同城微信推广平台朋友圈1万+微信好友浏览+全国各地3000加盟商*3000微信友=全国九千万微信好友同步浏览
                    </Text>
                </View>
                <ScrollView
                    showsVerticalScrollIndicator={false}
                >
                    <List style={styles.bgWhite}>
                        {this._renderList()}
                    </List>
                </ScrollView>
                <ActivityIndicator
                    toast
                    text="数据加载中..."
                    animating={this.state.animating}
                />
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#F5F5F5',
        flex: 1,
    },
    itemStyle:{
        flexDirection:'row'
    },
    keys:{
        marginRight:10,
    }
});


export default Shops;